<template>
    <div class="heightAll widthAll home" id="ding"> <!--这样可以设置多个class-->
        <top tar="ding"/>
        <div class="widthAll"> <!--搜索栏-->
            <!--input组件,有两个是js定义输入限制， clearable可清空-->
            <el-input class="search-content" clearable
                      maxlength="15"
                      placeholder="输入书名"
                      prefix-icon="el-icon-search"
                      show-word-limit
                      type="text"
                      v-model="bookForm.searchContent">
            </el-input>
            <el-select clearable placeholder="请选择书籍分类" style="margin-right: 15px;" v-model="bookForm.category">

                <el-option
                        :key="category.id"
                        :label="category.name"
                        :value="category.id"
                        v-for="category in getCategories">
                </el-option>
            </el-select>
            <!--button组件-->
            <el-button @click="search" icon="el-icon-search" type="primary">搜索</el-button>
            <el-button @click="returnHome" icon="el-icon-back" type="primary">返回</el-button>
        </div>
        <!--表格组件， 定义data后，prop即属性-->
        <el-table :data="getBooksList" class="el-table"
                  header-align="center" stripe style="width: 100%; text-align: center">
            <el-table-column label="编号" prop="id" width="150">
            </el-table-column>
            <el-table-column label="书名" prop="name" width="240">
            </el-table-column>
            <el-table-column label="作者" prop="author" width="180">
            </el-table-column>
            <el-table-column label="库存" prop="count" width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope"> <!--scope.row即按钮当前行的数据对象,需配置slot-->
                    <!--scope.row保存该行数据-->
                    <el-button @click="edit(scope.row)" size="mini" type="primary">修改</el-button>
                    <el-button @click="deleteById(scope.row)" size="mini" type="danger">删除</el-button>
                    <el-button @click="borrowBook(scope.row)" size="mini" type="success" v-if="scope.row.count > 0">借阅
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <!--分页组件-->
        <el-pagination :current-page="bookForm.pageNo"
                       :page-size="bookForm.pageSize"
                       :page-sizes="[5,10,15]"
                       :total="getBooksCount"
                       @current-change="change"
                       @size-change="handleSizeChange"
                       background
                       class="my-changePage"
                       layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
</template>

<script>
import categoryInfo from "../../store/categoryInfo"; /*导入store js,通过 categoryInfo===store*/
import bookInfo from "../../store/bookInfo";
import common from "../../store/common";
import borrowInfo from "../../store/borrowInfo";
import top from "../../components/backToTop";

export default {
    methods: {
        /*get获取书籍信息调用类*/
        getBooks() {
            if (!this.isSearching) { //非搜索状态下这两个搜索条件取Null
                this.bookForm.searchContent = null;
                this.bookForm.category = null;
            }
            //查书本
            bookInfo.dispatch('queryBooks', this.bookForm);
        },
        returnHome() {
            window.location.reload(); //重新加载页面的
        },
        /*搜索功能*/
        search() {
            /*bug1 :
            搜索后，改变搜索输入框类容，不点搜搜，直接换页后依然有效
            * */
            const _this = this;
            //搜索书名只允许输入中文或英文，其他不准
            //预处理
            if (_this.bookForm.searchContent != null && _this.bookForm.searchContent.replace(' ', '').length === 0)
                _this.bookForm.searchContent = null;
            if (_this.bookForm.category != null && _this.bookForm.category.length === 0)
                _this.bookForm.category = null;

            if (!(/^[\u4e00-\u9fa5a-zA-Z]*$/.test(_this.bookForm.searchContent))) {
                _this.$message.warning('搜索字符串含有非法字符');
                return;
            }
            _this.isSearching = true;
            _this.bookForm.pageNo = 1;
            _this.getBooks();
        },
        change(currentPage) { //换页，点击页码
            this.bookForm.pageNo = currentPage;
            this.getBooks();
        },
        handleSizeChange(size) {
            this.bookForm.pageSize = size;
            this.getBooks();
        },
        edit(row) { //修改信息
            common.routePush(this, bookInfo.state.routeUrl.updateBook, {
                id: row.id
            })
        },
        deleteById(row) { //删除书籍
            //询问是否删除
            common.ifDeleteConfirm(this).then(resp => {
                if (resp) {
                    bookInfo.dispatch('deleteBookById', row.id).then(resp => {
                        common.afterUpdateActions(this, resp, '删除', null, false);
                    });
                }
            });
        },
        borrowBook(row) {
            if (row.count <= 0) {
                this.$message.warning("没货了");
                return;
            }
            borrowInfo.dispatch('borrowBook', row.id).then((rs) => {
                if (!rs.rs && rs.msg != null)
                    this.$message.warning(rs.msg);
                else
                    common.afterUpdateActions(this, rs.rs, '借书', null, false);
            });
        }
    },
    data() {
        return {
            isSearching: false, //有bug，当没点搜索时也会将搜索内容传递
            bookForm: {  //给后端的表单
                searchContent: null,
                category: null,
                pageNo: 1,
                pageSize: 5,
            }
        }
    },
    mounted() {
        this.getBooks();
        //相当于下达一个指令，而不是等待其完成
        categoryInfo.dispatch('queryCategoriesAll'); //异步执行，渲染完数据也大概接受到了，到时候getter方法能接受到哦数据
    },
    computed: { /*之前错写成了 (){*/
        getBooksList: function () {
            return bookInfo.getters.getBooks;
        }, getBooksCount: function () {
            return bookInfo.getters.getTotal;
        }, getCategories: function () {
            return categoryInfo.getters.getCategories;
        }
    }, components: {
        top
    }
}

</script>

<style scoped>
    .search-content {
        width: 25%;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    /*分页固定*/
    .my-changePage {
        font-family: 微软雅黑, sans-serif;
        font-weight: normal;
    }
</style>